<template>
  <div id="proto-toolbar" class="no-user-select">
    <div class="toolbar-left">
      <a class="back-icon icon-section">
        <a-icon type="left" />
      </a>
      <span class="proto-proj-name">webapp-station</span>
    </div>
    <div class="toolbar-center">
      <div class="toolbar-center-left">
        <!-- 保存 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>4分钟前保存</span>
            <span>Ctrl+S</span>
          </template>
          <a class="item icon-section icon-section-group">
            <icon name="icon-shangchuan" />
            <span class="tip">保存</span>
          </a>
        </a-tooltip>

        <!-- 撤销 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>撤销</span>
            <span>Ctrl+Z</span>
          </template>
          <a class="item icon-section">
            <icon name="icon-chexiao" />
            <span class="tip">撤销</span>
          </a>
        </a-tooltip>

        <!-- 重做 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>重做</span>
            <span>Ctrl+Y</span>
          </template>
          <a class="item icon-section icon-section-group">
            <icon name="icon-zhongzuo" />
            <span class="tip">重做</span>
          </a>
        </a-tooltip>

        <a class="item icon-section" style="width:22px;">
          <icon name="icon-jian" />
        </a>
        <!-- 缩放 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>缩放</span>
          </template>
          <a class="item icon-section">
            <span class="tip">100%</span>
            <span class="tip">缩放</span>
          </a>
        </a-tooltip>

        <a class="item icon-section icon-section-group" style="width:22px;">
          <icon name="icon-jia1" />
        </a>
      </div>
      <div class="toolbar-center-center">
        <!-- 对齐 -->

        <a-dropdown>
          <a class="item icon-section icon-section-group">
            <div class="icons">
              <icon name="icon-zuoduiqi-" />
              <icon style="width:15px;height:15px;" name="icon-triangle-down-small" />
            </div>
            <!-- <icon name="icon-zuoduiqi-" /> -->
            <span class="tip">对齐</span>
          </a>
          <a-menu class="toolbar-center-more-item" slot="overlay">
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>左对齐</span>
                </div>
                <div class="right">Ctrl + Alt + L</div>
              </a>
            </a-menu-item>
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>水平居中</span>
                </div>
                <div class="right">Ctrl + Alt + C</div>
              </a>
            </a-menu-item>
            
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>右对齐</span>
                </div>
                <div class="right">Ctrl + Alt + R</div>
              </a>
            </a-menu-item>
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>垂直居中</span>
                </div>
                <div class="right">Ctrl + Alt + V</div>
              </a>
            </a-menu-item>
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>底对齐</span>
                </div>
                <div class="right">Ctrl + Alt + B</div>
              </a>
            </a-menu-item>
            </a-menu>
        </a-dropdown>

        <!-- 图层 -->

        <a-dropdown>
          <a class="item icon-section icon-section-group">
            <div class="icons">
              <icon name="icon-tuceng" />
              <icon style="width:15px;height:15px;" name="icon-triangle-down-small" />
            </div>
            <span class="tip">图层</span>
          </a>
          <a-menu class="toolbar-center-more-item" slot="overlay">
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>置顶</span>
                </div>
                <div class="right">Ctrl + Shift + ↑</div>
              </a>
            </a-menu-item>
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>置底</span>
                </div>
                <div class="right">Ctrl + Shift + ↓</div>
              </a>
            </a-menu-item>
            
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>上移一层</span>
                </div>
                <div class="right">Ctrl + Alt + ↑</div>
              </a>
            </a-menu-item>
            <a-menu-item class="more-item">
              <a href="javascript:;">
                <div class="left">
                  <icon name="icon-zuoduiqi-" />
                  <span>下移一层</span>
                </div>
                <div class="right">Ctrl + Shift + ↓</div>
              </a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>

        <!-- 组合  -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>组合</span>
            <span>Ctrl+G</span>
          </template>
          <a class="item icon-section">
            <icon name="icon-zuhe" />
            <span class="tip">组合</span>
          </a>
        </a-tooltip>
        <!-- 打散 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>打散</span>
            <span>Ctrl+Shift+G</span>
          </template>
          <a class="item icon-section">
            <icon name="icon-quxiaozuhe" />
            <span class="tip">打散</span>
          </a>
        </a-tooltip>
        <!-- 锁定 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>锁定</span>
          </template>
          <a class="item icon-section">
            <icon name="icon-33" />
            <span class="tip">锁定</span>
          </a>
        </a-tooltip>
      </div>
      <div class="toolbar-center-right">
        <!-- 素材库 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>素材库</span>
          </template>
          <a class="item icon-section icon-section-group">
            <icon name="icon-duosucai" />
            <span class="tip">素材库</span>
          </a>
        </a-tooltip>

        <!-- 版本 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>版本</span>
          </template>
          <a class="item icon-section icon-section-group">
            <icon name="icon-banbengengxin" />
            <span class="tip">版本</span>
          </a>
        </a-tooltip>

        <!-- 下载 -->
        <a-tooltip placement="bottom" class="ant-tooltip-open">
          <template slot="title">
            <span>下载</span>
          </template>
          <a class="item icon-section icon-section-group">
            <icon name="icon-Group-" />
            <span class="tip">下载</span>
          </a>
        </a-tooltip>
      </div>
    </div>
    <div class="toolbar-right">
      <a class="item icon-section icon-section-group">
        <icon name="icon-yingxiaogongzuoliu" />
        <span class="tip">工作流</span>
      </a>
      <a class="item icon-section icon-section-group">
        <icon name="icon-shebeiyunhang" />
        <span class="tip">运行</span>
      </a>

      <a-dropdown>
        <a class="item icon-section">
          <icon name="icon-more01-copy" />
          <span class="tip">更多</span>
        </a>
        <a-menu slot="overlay">
          <a-menu-item class="more-item">
            <a href="javascript:;">视频教程</a>
          </a-menu-item>
          <a-menu-item class="more-item">
            <a href="javascript:;">快捷键</a>
          </a-menu-item>
          
          <a-menu-divider />
          
          <a-menu-item class="more-item">
            <a href="javascript:;">偏好设置</a>
          </a-menu-item>
          <a-menu-item class="more-item">
            <a href="javascript:;">新手引导</a>
          </a-menu-item>
          <a-menu-item class="more-item">
            <a href="javascript:;">在线客服</a>
          </a-menu-item>
          <a-menu-item class="more-item">
            <a href="javascript:;">帮助中心</a>
          </a-menu-item>
          <a-menu-item class="more-item">
            <a target="_blank" href="https://gitee.com/browsers/shigongtu/commits/master">更新日志</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="less">
.more-item {
  font-size: 12px;
  min-width: 180px;
  > a {
    padding: 10px 20px;
  }
}
.toolbar-center-more-item {
  .more-item {
    > a{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
<style lang="less" scoped>
//   通用css
.icon-section {
  display: flex;
  width: 44px;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: rgb(141, 158, 167);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.1s linear 0s;
  flex-direction: column;
}
.icon-section-group {
  margin-right: 7px;
}
.icon-section:hover {
  color: rgb(65, 80, 88);
  background: rgb(242, 242, 242);
}
.tip {
  font-size: 11px;
  white-space: nowrap;
  color: rgb(65, 80, 88);
}

#proto-toolbar {
  height: @toolbar-height;
  box-shadow: rgba(100, 100, 100, 0.2) 0px 2px 3px 0px;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 0px solid transparent;

  .toolbar-left {
    padding-right: 10px;
    display: flex;
    align-items: center;
    height: 100%;
    flex: 0 0 248px;
    .proto-proj-name {
      font-size: 14px;
      color: rgb(82, 94, 113);
      line-height: unset;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .toolbar-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    flex: 1 1 0%;
    padding: 0px 27px;
    .toolbar-center-left,
    .toolbar-center-center,
    .toolbar-center-right {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .toolbar-center-center {
      flex-basis: 292px;
    }
  }
  .toolbar-right {
    flex-basis: 230px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 39px;
    height: 100%;
  }

  .toolbar-item-group {
    margin-right: 10px;
  }
  .toolbar-item {
    height: 100%;
    width: 44px;
    color: rgb(91, 107, 115);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 2px solid transparent;
  }
}
</style>